<template>
    <div class="synchronize-brand" :status="bindStatus">

        <h3>Branding</h3>

        <BrandingChangeBranding :hangtag="hangtag" :packaging='packaging' @change='onChangeClick($event)' @disconnect="onDisconnect($event)" />

        <!-- 选择吊牌 -->
        <BrandingHangtagSelect v-if="hangtagSelect" v-model="hangtagSelect" @update="onBind('tag', $event)" />
        <!-- 选择包装 -->
        <BrandingPackageSelect v-if="packagingSelect" v-model="packagingSelect" @update="onBind('pack', $event)" />
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "SynchronizeBrand",
    data () {
        return {
            loading: false,
            hangtagSelect: null,
            packagingSelect: null,
        };
    },
    computed: {
        ...mapState("synchronize", {
            clothes: "clothes",
            setting: "setting",
            status: "status",
        }),
        hangtag () {
            return this.setting.tag_design_info || null
        },
        packaging () {
            return this.setting.pack_design_info || null
        },
        bindStatus () {
            if (this.status.action == 'create') {
                // 新的设计
                return 'new'
            } else if (this.hangtag || this.packaging) {
                // 有内容
                return 'forbiden'
            } else {
                // 没有内容
                return 'hidden'
            }
        }
    },
    methods: {
        // 更换绑定
        onChangeClick (type) {
            if (type == 'tag') {
                this.hangtagSelect = this.setting.tag_design_info || {};
            } else if (type == 'pack') {
                this.packagingSelect = this.setting.pack_design_info || {};
            }
        },

        // 解除绑定
        onDisconnect (type) {
            if (type == 'tag') {
                this.setting.tag_design_info = null;
                this.$store.commit("synchronize/SET_VARIANTS", this.clothes);
            } else if (type == 'pack') {
                this.setting.pack_design_info = null;
                this.$store.commit("synchronize/SET_VARIANTS", this.clothes);
            }
        },
        // 修改绑定
        onBind (type, brand) {

            if (type == 'tag') {
                this.setting.tag_design_info = brand;
                this.$store.commit("synchronize/SET_VARIANTS", this.clothes);

            } else if (type == 'pack') {
                this.setting.pack_design_info = brand;
                this.$store.commit("synchronize/SET_VARIANTS", this.clothes);
            }

            this.hangtagSelect = null;
            this.packagingSelect = null;

        },
    },
    mounted () { },
};
</script>

<style lang="scss" scoped>
.synchronize-brand {
    padding-top: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid #ebebeb;

    & > h3 {
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 16px;
    }

    & > .change-branding::v-deep {
        margin: 14px -16px 0;
        .change-branding-item {
            width: calc(50% - 32px);
            margin: 0 16px;
            .change-branding-title span {
                font-size: 14px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 16px;
            }
        }
    }
}

// 禁用
.synchronize-brand[status='forbiden'] .change-branding::v-deep {
    .change-branding-item {
        .change-branding-info {
            justify-content: center;
        }
        fieldset {
            display: none;
        }

        &[empty] {
            display: none;
        }
    }
}

.synchronize-brand[status='hidden'] {
    display: none;
}
</style>
